<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
		xmlns:ui="http://java.sun.com/jsf/facelets" 
		xmlns:h="http://java.sun.com/jsf/html" 
		xmlns:f="http://java.sun.com/jsf/core">
    <f:view contentType="text/html" encoding="UTF-8">
		<!-- Dont use h:head coz it'll bring in themes that can screw up the device layout -->
		<head>
			<meta name="viewport" content="width=device-width, initial-scale=1" />
			<link type="text/css" rel="stylesheet" href="#{device.contextUrl}/fontawesome-6.1.1/css/all.min.css" />

			<script type="text/javascript" src="#{device.contextUrl}/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces"></script>

			<link href="#{device.contextUrl}/primevue-3.12.6/themes/saga-blue/theme.css" rel="stylesheet" />
			<link href="#{device.contextUrl}/primevue-3.12.6/primevue.min.css" rel="stylesheet" />
			<link href="#{device.contextUrl}/primevue-3.12.6/primeflex-3.1.3.min.css" rel="stylesheet" />
			<link href="#{device.contextUrl}/primevue-3.12.6/primeicons-5.0.0/primeicons.css" rel="stylesheet" />

			<!-- Dependencies -->
			<script src="#{device.contextUrl}/primevue-3.12.6/vue.global.3.2.33.prod.js"></script>
			<script src="#{device.contextUrl}/primevue-3.12.6/core.min.js"></script>
			
			<!-- App -->
			<script src="#{device.contextUrl}/primevue-3.12.6/speeddial.min.js"></script>
			<script src="#{device.contextUrl}/primevue-3.12.6/toast.min.js"></script>
			<script src="#{device.contextUrl}/primevue-3.12.6/toastservice.min.js"></script>

			<style>
				html, body {
					height: 100%;
					padding: 0px;
					margin: 0px;
				}
				
				iframe {
					padding: 0px;
					margin: 0px;
				}
				
				/* The device with borders */
				.smartphone {
					-webkit-transform-origin: 0 0;
					transform-origin: 0 0;
					-webkit-transform: scale(.8) translate(-50%) rotate(0deg);
					/* Scaled down for a better Try-it experience (change to 1 for full scale) */
					transform: scale(.8) translate(-50%) rotate(0deg);
					/* Scaled down for a better Try-it experience (change to 1 for full scale) */
					left: 50%;
					position: absolute;
					width: 360px;
					height: 640px;
					border: 16px black solid;
					border-top-width: 60px;
					border-bottom-width: 60px;
					border-radius: 36px;
					margin-top: 20px;
					box-sizing: content-box;
				}
				
				/* The horizontal line on the top of the device */
				.smartphone:before {
					content: '';
					display: block;
					width: 60px;
					height: 5px;
					position: absolute;
					top: -30px;
					left: 50%;
					transform: translate(-50%, -50%);
					background: #333;
					border-radius: 10px;
				}
				
				/* The circle on the bottom of the device */
				.smartphone:after {
					content: '';
					display: block;
					width: 35px;
					height: 35px;
					position: absolute;
					left: 50%;
					bottom: -65px;
					transform: translate(-50%, -50%);
					background: #333;
					border-radius: 50%;
				}
				
				/* The screen (or content) of the device */
				.smartphone .content {
					width: 360px;
					height: 640px;
					background: white;
				}
				
				/* The device with borders */
				.tablet {
					-webkit-transform-origin: 0 0;
					transform-origin: 0 0;
					-webkit-transform: scale(.6) translate(-50%) rotate(0deg);
					/* Scaled down for a better Try-it experience (change to 1 for full scale) */
					transform: scale(.6) translate(-50%) rotate(0deg);
					/* Scaled down for a better Try-it experience (change to 1 for full scale) */
					left: 50%;
					position: absolute;
					width: 768px;
					height: 1024px;
					border: 16px black solid;
					border-top-width: 60px;
					border-bottom-width: 60px;
					border-radius: 36px;
					margin-top: 20px;
					box-sizing: content-box;
				}
				
				/* The horizontal line on the top of the device */
				.tablet:before {
					content: '';
					display: block;
					width: 60px;
					height: 5px;
					position: absolute;
					top: -30px;
					left: 50%;
					transform: translate(-50%, -50%);
					background: #333;
					border-radius: 10px;
				}
				
				/* The circle on the bottom of the device */
				.tablet:after {
					content: '';
					display: block;
					width: 35px;
					height: 35px;
					position: absolute;
					left: 50%;
					bottom: -65px;
					transform: translate(-50%, -50%);
					background: #333;
					border-radius: 50%;
				}
				
				/* The screen (or content) of the device */
				.tablet .content {
					width: 768px;
					height: 1024px;
					background: white;
					margin: -1px;
				}
				
				/* The laptop with borders */
				.laptop {
					-webkit-transform-origin: 0 0;
					transform-origin: 0 0;
					-webkit-transform: scale(.6) translate(-50%);
					/* Scaled down for a better Try-it experience (change to 1 for full scale) */
					transform: scale(.6) translate(-50%);
					/* Scaled down for a better Try-it experience (change to 1 for full scale) */
					left: 50%;
					position: absolute;
					width: 1366px;
					height: 800px;
					border-radius: 6px;
					border-style: solid;
					border-color: black;
					border-width: 24px 24px 80px;
					background-color: black;
					margin-top: 20px;
					box-sizing: content-box;
				}
				
				/* The keyboard of the laptop */
				.laptop:after {
					content: '';
					display: block;
					position: absolute;
					width: 1600px;
					height: 60px;
					margin: 80px 0 0 -110px;
					background: black;
					border-radius: 6px;
				}
				
				/* The top of the keyboard */
				.laptop:before {
					content: '';
					display: block;
					position: absolute;
					width: 250px;
					height: 30px;
					bottom: -110px;
					left: 50%;
					-webkit-transform: translate(-50%);
					transform: translate(-50%);
					background: #f1f1f1;
					border-bottom-left-radius: 5px;
					border-bottom-right-radius: 5px;
					z-index: 1;
				}
				
				/* The screen (or content) of the device */
				.laptop .content {
					width: 1366px;
					height: 800px;
					overflow: hidden;
					border: none;
				}
				
				.desktop {
					-webkit-transform-origin: 0 0;
					transform-origin: 0 0;
					-webkit-transform: scale(1) translate(0%) rotate(0deg);
					/* Scaled down for a better Try-it experience (change to 1 for full scale) */
					transform: scale(1) translate(0%) rotate(0deg);
					/* Scaled down for a better Try-it experience (change to 1 for full scale) */
					left: 0px;
					position: relative;
					width: 100%;
					height: 100%;
					border: none;
				}

				/* The screen (or content) of the device */
				.desktop .content {
					width: 100%;
					height: 100%;
					overflow: auto;
					border: none;
				}
				
				.p-speeddial-action {
					width: 64px;
					height: 64px;
					text-decoration: none;
				}
			</style>
		</head>
		<body>
			<div id="device" class="smartphone">
			  <div class="content">
			    <iframe id="iframe" src="#{device.startingDeviceJspUrl}" style="width:100%;border:none;height:100%"></iframe>
			  </div>
			</div>
			<div style="position:fixed;bottom:80px;right:70px;">
				<div id="app" >
 					<p-toast position="center" />
 					<h:outputText value="&lt;p-speeddial :model=&quot;items&quot; show-icon=&quot;pi pi-bars&quot; hide-icon=&quot;pi pi-times&quot; button-class=&quot;p-button-danger&quot; radius=&quot;150&quot; direction=&quot;up-left&quot; type=&quot;quarter-circle&quot; :tooltip-options=&quot;{position: 'left'}&quot; /&gt;" escape="false" />
				</div>
			</div>

			<script type="module">
				const {createApp, ref} = Vue;
				const {useToast} = primevue.usetoast;
				const Tooltip = primevue.tooltip;

				const App = {
					setup() {
						const toast = useToast();

						const items = ref([
							{
								label: 'Mobile',
								icon: 'fa-solid fa-mobile-screen-button fa-2x',
								command: () => {
									App.clicked('smartphone', 'phone');
									toast.add({severity: 'success', summary: 'Mobile', detail: 'Mobile selected', closable: false, life: 2000});
								}
							},
							{
								label: 'Tablet',
								icon: 'fa-solid fa-tablet-screen-button fa-2x',
								command: () => {
									App.clicked('tablet', 'tablet');
									toast.add({severity: 'success', summary: 'Tablet', detail: 'Tablet selected', closable: false, life: 2000});
								}
							},
							{ 
								label: 'Laptop',
								icon: 'fa-solid fa-laptop fa-2x',
								command: () => {
									App.clicked('laptop', 'desktop');
									toast.add({severity: 'success', summary: 'Laptop', detail: 'Laptop selected', closable: false, life: 2000});
								}
							},
							{
								label: 'Desktop',
								icon: 'fa-solid fa-desktop fa-2x',
								command: () => {
									App.clicked('desktop', 'desktop');
									toast.add({severity: 'success', summary: 'Desktop', detail: 'Desktop selected', closable: false, life: 2000});
								}
							}
						]);
						return {items}
					},
					components: {
						"p-speeddial": primevue.speeddial,
						"p-toast": primevue.toast
					},
					clicked(styleClass, userAgentType) {
						$('#device').attr('class', styleClass);
						$('#iframe').attr('src', "#{device.clickDeviceJspUrl}" + userAgentType);
					}
				};

				createApp(App)
					.use(primevue.config.default)
					.use(primevue.toastservice)
					.directive("tooltip", Tooltip)
					.mount("#app");
			</script>
		</body>
	</f:view>
</html>
